<!-- 系统参数设置 -->
<template>
  <div class="prison-set">
    <Custom-tree @leafNodeClick="getNodeData"></Custom-tree>
    <div class="table-box">
      <CustomTable
        ref="tableRef"
        type="index"
        multiple
        v-model:selection="selection"
        v-model:form="searchForm"
        :tableHeader="tableHeader"
        api="/znjszd3/ht/dwcfg/getDwConfigList"
        :params="params"
        :requiredParamsValidate="{ dwdm: '请先在左侧选择单位' }"
        lastColMinWidth="14%"
        :requestImmediate="false"
      >
        <template v-slot:tableTop="{ rows }">
          <el-button type="primary" class="add" plain @click="add">
            <el-icon><Plus /></el-icon>
            新增</el-button
          >
        </template>
        <template v-slot:lastColumn="{ row }">
          <el-button type="primary" plain @click.stop="edit(row)">
            <el-icon><EditPen /></el-icon>
            修改</el-button
          >
          <el-button type="danger" plain @click.stop="del(row)">
            <el-icon><Delete /></el-icon>
            删除</el-button
          >
        </template>
      </CustomTable>
    </div>

    <CustomDialog :title="diaglogType == 'add' ? '新增参数' : '修改参数'" v-model:dialogVisible="dialogVisible" width="30%" height="310rem" top="20vh" @confirm="confirm">
      <CustomForm ref="formRef" v-model:form="form" :editable="true" columns="1"> </CustomForm>
    </CustomDialog>
  </div>
</template>

<script setup name="prisonSet">
import { ref, onBeforeMount, onMounted, computed, watch, onBeforeUnmount } from 'vue'
import { http, fillData } from '@/utils/index.js'
import { ElMessage, ElMessageBox } from 'element-plus'
const props = defineProps({})
const tableRef = ref()
const formRef = ref()
const dialogVisible = ref(false)
const diaglogType = ref('add')
const searchForm = ref({
  key: '',
  value: '',
  sm: '',
  forapp: ''
})
const params = ref({
  dwdm: ''
})
const form = ref({
  key: '',
  value: '',
  sm: '',
  forapp: ''
})
const tableHeader = ref([
  {
    key: 'key',
    label: '参数名称',
    width: '15%'
  },
  {
    key: 'value',
    label: '参数值',
    width: '14'
  },
  {
    key: 'sm',
    label: '参数说明',
    width: '24%'
  },
  {
    key: 'forappmc',
    label: '关联业务',
    width: '15%'
  },
  {
    key: 'bgr',
    label: '变更人',
    width: '8%'
  },
  {
    key: 'bgsj',
    label: '变更时间',
    sortable: 'custom',
    width: '15%'
  }
])
const rowData = ref({})
const selection = ref([])
const add = () => {
  diaglogType.value = 'add'
  dialogVisible.value = true
}
const edit = (row) => {
  diaglogType.value = 'edit'
  rowData.value = row
  dialogVisible.value = true
  fillData(form.value, row)
}
const confirm = () => {
  if (diaglogType.value == 'add') {
    http(
      '/znjszd3/ht/dwcfg/addSysConfig',
      'post',
      {
        dwdm: params.value.dwdm,
        ...form.value
      },
      false
    ).then((res) => {
      if (res.status == 200) {
        ElMessage.success(res.message[0])
        tableRef.value.getData()
        dialogVisible.value = false
      }
    })
  } else {
    http(
      '/znjszd3/ht/dwcfg/updateSysconfById',
      'post',
      {
        id: rowData.value.id,
        dwdm: params.value.dwdm,
        ...form.value
      },
      false
    ).then((res) => {
      if (res.status == 200) {
        ElMessage.success(res.message[0])
        tableRef.value.getData()
        dialogVisible.value = false
      }
    })
  }
}
const del = (row) => {
  ElMessageBox.confirm('确定要删除该条参数设置吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      http(
        '/znjszd3/ht/dwcfg/delSysconfById',
        'post',
        {
          id: row.id
        },
        false
      ).then((res) => {
        if (res.status == 200) {
          ElMessage.success(res.message[0])
          tableRef.value.getData()
        }
      })
    })
    .catch(() => {})
}
const getNodeData = (node) => {
  params.value.dwdm = node.zddm
  tableRef.value.getData()
}
</script>
<style lang="scss" scoped>
.prison-set {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  height: 100%;
  .table-box {
    margin: 10px;
    width: calc(100% - 210px);
    height: 965px;
    ::v-deep(.custom-table) {
      .add {
        .el-icon {
          font-size: 18px !important;
        }
      }
    }
  }
}
</style>
